<template>
	<view class="address-page relative">
		<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
			:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />

		<comDetailNavigateBack :title="title" />

		<view class="address-view relative">
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-bg.png`" class="bg" />

			<view class="box flex relative">
				<view class="box-left">姓名</view>
				<input v-model="addressInfo.name" type="text" placeholder="请输入"
					placeholder-style="color:#666666;font-size:28rpx" maxlength="10"
					@input="inspectNameLength(addressInfo.name.length, 10, '姓名最多10字')" />
			</view>

			<view class="box flex relative">
				<view class="box-left">手机号</view>
				<input v-model="addressInfo.phone" type="number" placeholder="请输入"
					placeholder-style="color:#666666;font-size:28rpx" maxlength="11" />
			</view>

			<!-- <view class="box flex relative">
				<view class="box-left">身份证</view>
				<input v-model="addressInfo.idcard" type="number" placeholder="请输入"
					placeholder-style="color:#666666;font-size:28rpx" maxlength="30" />
			</view> -->

			<view class="box flex relative">
				<view class="box-left">所在地区</view>

				<comCustomRegion :defaultRegion="region" @getRegion="getRegion" style="flex: 1;">
					<view class="flex region-box">
						<view :style="{ color: regionDescText !== '请选择地区' ? '#111111' : '#666666' }">
							{{ regionDescText }}
						</view>
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							style="width: 13rpx;height: 27rpx;"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-icon-right.png`"
							class="icon-right" />
					</view>
				</comCustomRegion>
			</view>

		</view>
		<!-- 按钮 -->
		<view class="submit-btn relative" @click="addressSaveFun">
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-submit-btn-bg.png`"
				class="bg" />
			<view class="relative">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLianlianBindAPi,
	} from '@/setupproject/INTERFACE.js';
	
	export default {
		name: 'lianlianInfoPage',
		data() {
			return {
				type: 'add',
				title: "支付信息",
				rules: {
					name: '请输入姓名',
					phone: '请输入手机号',
					// idcard: '请输入身份证',
					province: '请选择地区',
					city: '请选择地区',
				},
				addressInfo: {
					// idcard: '',
					phone: '',
					name: '',
					province: '',
					city: '',
				},
			};
		},

		onLoad(option) {
			if (option.item) {
				let addressInfo = JSON.parse(option.item);
				this.addressInfo.name = addressInfo.name;
				this.addressInfo.phone = addressInfo.phone;
				// this.addressInfo.idcard = addressInfo.id_no;
				this.addressInfo.province = addressInfo.delivery_addr_province_name;
				this.addressInfo.provinceCode = addressInfo.delivery_addr_province;
				this.addressInfo.city = addressInfo.delivery_addr_city_name;
				this.addressInfo.cityCode = addressInfo.delivery_addr_city;
			}
		},
		computed: {
			region() {
				return [this.addressInfo.province, this.addressInfo.city];
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			regionDescText() {
				let [province, city] = this.region;
				//不重复显示 直辖市
				if (!province || !city) {
					return '请选择地区';
				}
				return `${province === city ? province : province + ' ' + city}`;
			},
		},
		methods: {
			// 校验长度
			inspectNameLength(length, maxLength, title) {
				if (length >= maxLength) {
					uni.showToast({
						title,
						icon: "none"
					})
				}
			},

			// 保存
			async addressSaveFun() {
				const {
					addressInfo,
					rules
				} = this;

				for (const key in rules) {
					const title = rules[key];
					if (!addressInfo[key]) {
						return uni.showToast({
							title,
							icon: 'none'
						});
					}
				}

				let res = await getLianlianBindAPi({
					name: this.addressInfo.name, // name	是	string	姓名
					// id_no: this.addressInfo.idcard, // id_no	是	string	身份证号码
					phone: this.addressInfo.phone, // phone	是	string	手机
					
					delivery_addr_province_name: this.addressInfo
						.province, // delivery_addr_city	是	string	所在市区编码
					delivery_addr_province: this.addressInfo
						.provinceCode, // delivery_addr_province	是	string	所在城市编码
						
					delivery_addr_city_name: this.addressInfo.city, // delivery_addr_city	是	string	所在市区编码
					delivery_addr_city: this.addressInfo.cityCode, // delivery_addr_city	是	string	所在市区编码
				});

				uni.showToast({
					title: res.msg,
					icon: 'none',
					mask: true,
					duration: 800
				});

				if (res.code === 200) {
					setTimeout(() => {
						uni.navigateBack();
					}, 800);
				}
			},

			// 选择地区
			getRegion(region) {
				const {
					addressInfo
				} = this;

				addressInfo.province = region[0].region;
				addressInfo.provinceCode = region[0].code;

				addressInfo.city = region[1].region;
				addressInfo.cityCode = region[1].code;
			},

		}
	};
</script>

<style lang="scss" scoped>
	.address-page {
		width: 100%;
		height: 100vh;

		.address-view {
			width: 710rpx;
			height: 342rpx;
			
			font-size: 28rpx;
			color: #111111;
			margin: 0 auto;
			padding: 20rpx 30rpx;

			.box {
				padding: 30rpx 0;
				align-items: center;

				.box-left {
					width: 34%;
				}

				.box-right {
					width: 66%;
					color: #111111;
				}
			}

			.icon-right {
				width: 24rpx;
				height: 26rpx;
				text-align: right;
			}

			.icon-switch {
				width: 73rpx;
				height: 35rpx;
			}
		}

		.region-box {
			align-items: center;
			justify-content: space-between;
		}

		input {
			font-size: 28rpx;
			color: #111111;
		}

		.submit-btn {
			width: 690rpx;
			height: 90rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			line-height: 90rpx;
			text-align: center;
			margin: 77rpx auto;
		}
	}
</style>